<template>
  <div class="jnd">
    <div class="table" ref="table">
      <div v-for="(parent, pIdx) in getCols()" :key="parent" class="table-col">
        <div v-for="(child, cIdx) in 6" :key="child" class="table-row">
          <div class="txt all-center" :class="getCss(pIdx, cIdx)">{{ getTxt(pIdx, cIdx) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useNormal } from './useNormal';


type Props = {
  gameType: string
  type: number
  index?: number
}

const props = defineProps<Props>()

const table = ref(null)

const {getList, getCols, getCss, getTxt } = useNormal(props, null, table,'simple')

getList()
</script>

<style lang="less" scoped>
@borderColor: rgba(73, 73, 117, 1);

.table {
  display: flex;
  height: max-content;
  border: 1px solid @borderColor;
  border-radius: 4px;
  background: linear-gradient(0deg, #222635, #222635);
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;


  &::-webkit-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    display: none;
  }

  .table-col {
    width: 19px;
    border-right: 1px solid @borderColor;
    box-sizing: border-box;

    &:nth-last-of-type(1) {
      border-right: none;
    }

    .table-row {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 19px;
      box-sizing: border-box;
      border-bottom: 1px solid @borderColor;
      color: #fff;

      &:nth-last-of-type(1) {
        border-bottom: none;
      }
    }
  }

  .txt {
    width: 15px;
    height: 15px;
    font-size: 9px;
    border-radius: 50%;

    &.red {
      background-color: #f00;
    }

    &.blue {
      background-color: rgb(49, 151, 241);
    }
  }
}
</style>
